<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <template>
                            <div class="text-muted text-center mb-3">
                                <small>您好</small>
                            </div>
                        </template>
                        <template>
                            <div class="text-center text-muted mb-4">
                                <small>请填写房源相关信息</small>
                            </div>
                            <form role="form">
                                <base-input alternative
                                            v-model="houseName"
                                            class="mb-3"
                                            placeholder="房源名称/House Name"
                                            addon-left-icon="ni ni-collection">
                                </base-input>
                                <base-input alternative type="text"
                                            v-model="houseAddress"
                                            placeholder="房屋地址/Address"
                                            addon-left-icon="ni ni-pin-3">
                                </base-input>
                                <base-input alternative type="number"
                                            v-model="houseSize"
                                            @input="oninputRto1"
                                            placeholder="房源面积(平方米)/Size(㎡)"
                                            addon-left-icon="fa fa-circle">
                                </base-input>
                                <div class="row">
                                    <div class="col-md-3">
                                        <base-input v-model="houseRoomC" @input="oninputNM1" alternative min="0" type="number"></base-input>
                                    </div>
                                    <div class="col-md-3 contentDiv">
                                        <p style="font-size:24px">室</p>
                                    </div>
                                    <div class="col-md-3">
                                        <base-input v-model="houseHallC" @input="oninputNM2" alternative min="0" type="number"></base-input>
                                    </div>
                                    <div class="col-md-3 contentDiv">
                                        <p style="font-size:24px">厅</p>
                                    </div>
                                </div>
                                <base-input alternative type="number"
                                            v-model="houseFloor"
                                            placeholder="房源楼层/Floor"
                                            addon-left-icon="fa fa-building">
                                </base-input>
                                <textarea v-model="houseDescription" class="form-control form-control-alternative mb-3" rows="3" placeholder="请填写房屋的详细描述"></textarea>
                                <base-input v-model="houseTag" type="text" alternative placeholder="输入房源标签，用逗号分隔" addon-left-icon="ni ni-tag"></base-input>
                                <div class="row justify-content-center mb-3">
                                    <div class="col-md-4">
                                        <base-radio name="radio0" class="contentDiv" v-model="rentType">长租</base-radio>
                                    </div>
                                    <div class="col-md-4">
                                        <base-radio name="radio1" class="contentDiv" v-model="rentType">短租</base-radio>
                                    </div>
                                </div>
                                <b-form-file
                                multiple
                                accept="image/*"
                                v-model="file"
                                :state="file.length >= 5"
                                placeholder="房屋图像拖动至此"
                                drop-placeholder="放下"
                                class="mb-3"
                                browse-text="浏览"
                                ></b-form-file>
                                <base-input type=number v-model="houseRental" @input="oninputRto2" placeholder="价格(长租/月价格，短租/日价格)" addon-left-icon="fa fa-money"></base-input>
                                <div class="text-center">
                                    <base-button @click="houseSumbit" type="primary" class="my-4">{{submitText}}</base-button>
                                </div>
                            </form>
                        </template>
                        <base-alert v-if="showError" type="danger">
                            {{errorMsg}}
                        </base-alert>
                        <base-alert v-if="showSuccessMsg" type="success">
                            房源提交成功！
                        </base-alert>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>

import {addHome, mulitUpload, checkCookie} from "../api";

export default {
    data() {
      return {
          submitText: '提交',
          rentType: '',
          houseName: '',
          houseDescription: '',
          houseAddress: '',
          houseSize: '',
          showError: false,
          houseRoomC: '',
          houseHallC: '',
          houseRental: '',
          houseFloor: '',
          houseTag: '',
          errorMsg: '',
          showSuccessMsg: false,
          file: [],
      }
    },
    methods: {
        goPage(page){
            if (page === -1)
            {
                this.$router.go(-1);
            } else {
                this.$router.push({name:page});
            }
        },
        oninputRto1() {
            // 通过正则过滤小数点后一位
            let value = this.houseSize;
            this.houseSize = (value.match(/^\d*(\.?\d{0,1})/g)[0]) || null;
        },
        oninputNM1() {
            // 非负整数
            let value = this.houseRoomC;
            this.houseRoomC = (value.match(/^\d*(\.?)/g)[0]) || null;
        },
        oninputNM2() {
            // 非负整数
            let value = this.houseHallC;
            this.houseHallC = (value.match(/^\d*(\.?)/g)[0]) || null;
        },
        oninputRto2() {
            // 通过正则过滤小数点后两位
            let value = this.houseRental;
            this.houseRental = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
        },
        messageSuccess () {
            this.showSuccessMsg = true;
        },
        message(msg) {
            this.showError = true;
            this.errorMsg = msg;
        },
        houseSumbit(){
            this.showError= false;
            this.submitText = '提交中...';
            if (!this.houseName || !this.houseAddress || !this.houseRental || !this.houseDescription)
            {
                this.message('请填写完整的标题/地址/价格/描述!');
                this.submitText = '提交';
                return false;
            }
            if (this.houseName.length > 40)
            {
                this.message('标题长度不能超过40字');
                this.submitText = '提交';
                return false;
            }
            if (this.houseDescription.length > 500 || this.houseDescription.length < 10)
            {
                this.message('房源描述应在10-500个字之间');
                this.submitText = '提交';
                return false;
            }
            let param = {
                rentalmethod: this.rentType === 'radio0' ? 'longr' : 'shortr',
                title: this.houseName,
                description: this.houseDescription,
                address: this.houseAddress,
                area: this.houseSize,
                layout: this.houseRoomC + '室' + this.houseHallC + '厅',
                price: this.houseRental,
                tags: this.houseTag.split(/[,，]/),
                floor: this.houseFloor
            };
            if (this.file.length < 5){
                this.message('请至少上传5张房源照片');
                this.submitText = '提交';
                return false;
            } else {
                new Promise(resolve => {
                    let formData = new FormData();
                    this.file.forEach(f => {
                        formData.append("files", f);
                    });
                    mulitUpload(formData).then(res=>{
                        if (res.code === "1")
                        {
                            console.log("imgaddrs", res.data);
                            param.photos = res.data;
                            resolve();
                        } else {
                            this.message(res.msg);
                            this.submitText = '提交';
                            return false;
                        }
                    })
                })
                .then(() => {
                    console.log("submit", param);
                    addHome(param).then(res => {
                        if (res.code === "1") {
                            this.messageSuccess();
                            setTimeout(() => {this.goPage(-1)}, 2000);
                        } else {
                            this.message(res.msg);
                            this.submitText = '提交';
                            return false;
                        }
                    })
                    .catch(error => {
                        this.message(error);
                        this.submitText = '提交';
                        return false;
                    })
                })
                .catch(error => {
                    this.message(error);
                    this.submitText = '提交';
                    return false;
                })
            }

        }
    },
    watch: {
    },
    created() {
        checkCookie();
    },
};
</script>
<style>
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: '浏览';
}
.contentDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  border-right: aliceblue;
  border: 1px;
}
</style>
